<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      body {
        width: 100%;
        height: 100%;
      }
      .barrageBox {
        width: 1100px;
        height: 500px;
        border: 1px solid orange;
        box-sizing: border-box;
        position: relative;
        margin: 200px auto;
        overflow: hidden;
      }
      .box {
        position: absolute;
        visibility: hidden;
        animation: barrage 6s linear 0s;
        /* 这个是循环播放的属性，需要就加上 */
        /* animation-play-state: paused; */
      }

      /* 鼠标划入时暂停动画 */
      .box:hover {
        animation-play-state: paused;
      }

      @keyframes barrage {
        from {
          left: 100%;
          visibility: visible;
          transform: translateX(0);
        }

        to {
          left: 0%;
          visibility: visible;
          transform: translateX(-100%);
        }
      }

      .barrageButton {
        position: absolute;
        width: 1100px;
        top: 730px;
        left: calc(50% - 540px);
      }
    </style>
  </head>
  <body>
    <div class="barrageBox"></div>
    <div class="barrageButton">
      <input type="text" id="input" />
      <button id="button">发送</button>
    </div>
  </body>
</html>
<script>
  // 思路：1、有一个用于播放弹幕的方框 2、抽离不同的参数，距离顶部的距离，用定时器每秒生成一个，是循环生成的，如果数量过多就删除循环。
  let barrageList = ["干得漂亮", "做得好", "你是最棒的"];

  let topList = [20, 40, 60, 80, 100, 120, 140, 160, 180, 200]; //随机娶一个数，是到顶部的距离的

  let num = Math.floor(Math.random() * 10); // 随机生成一个数，然后取一个距离顶部的位置

  let barrageBox = document.querySelector(".barrageBox");

  function createBarrage(barrageList) {
    for (let index = 0; index < barrageList.length; index++) {
      (function (index) {
        setTimeout(() => {
          let num = Math.floor(Math.random() * 10);
          let div = document.createElement("div");
          div.innerText = barrageList[index];
          div.classList.add("box");
          div.style.top = topList[num] + "px";
          div.style.color = "rgb(" + my_rgb() + ")"; //随机生成一个颜色的
          barrageBox.appendChild(div);
        }, index * 1000);
      })(index);
    }
  }

  createBarrage(barrageList);

  // 动画循环播放 差不多就是所有的元素都走了一遍，才会一起走第二遍 时间的计算是这样的：每隔一秒生成一个，到最后一个走完，6s是走完一遍的动画，就是长度+6的时间，如果弹幕的数量足够多，这个可以删除
  var my_set = setInterval(() => {
    barrageBox.innerHTML = "";
    createBarrage(barrageList);
  }, (barrageList.length + 6) * 1000);

  // 随机生成一个颜色的
  function my_rgb() {
    let r = Math.floor(Math.random() * 256);
    let g = Math.floor(Math.random() * 256);
    let b = Math.floor(Math.random() * 256);
    return r + "," + g + "," + b;
  }

  let button = document.getElementById("button");
  let input = document.getElementById("input");

  // 点击增加弹窗，就是增加一个div
  button.onclick = function () {
    if (!input.value) return;
    barrageList.push(input.value);

    let num = Math.floor(Math.random() * 10);
    let div = document.createElement("div");
    div.innerText = input.value;
    div.classList.add("box");
    div.style.top = topList[num] + "px";

    // 加上边框，醒目标志
    div.style.border = "1px solid red";
    div.style.borderRadius = 10 + "px";
    div.style.padding = "5px 10px";

    div.style.color = "rgb(" + my_rgb() + ")"; //随机生成一个颜色的
    barrageBox.appendChild(div);
    input.value = "";

    clearInterval(my_set);

    // 因为清除的话会重新计算时间，会造成一段时间的空白期，所以需要渲染一次。
    createBarrage(barrageList);
    my_set = setInterval(() => {
      barrageBox.innerHTML = "";
      createBarrage(barrageList);
    }, (barrageList.length + 6) * 1000);
  };
</script>
